第八天～
前面我們把 React Native 一些特色講解了一下，
也稍微的改動了畫面，
那在這過程中，多次的提到 component，
那我們今天就來說一下 component 吧
在 React ， 它就是封裝了 一部分畫面的 結構、樣式 、 邏輯
component 擁有以下特性：
在 component 內部的邏輯是封閉的，無法直接的從外部去干涉
這其實就像在玩積木一樣，我們可以把不同的 component 組合起來，放在同一個空間裡
const App = () => {
return (
<div>
<Header />
<Body />
<Footer />
</div>
);
};
當我們在建立 component 我們可以在內部制定相關的邏輯，
比如說，我希望建立一個 TouchMe component ，
它的邏輯是：按鈕能夠在按下去的時候改變文字
const TouchMe = () => {
const [text, setText] = useState('按我！');
const onButtonClick = () => {
setText('按了！');
};
return <Button onClick={onButtonClick}>{text}</Button>;
};
如上，就是一個簡單的邏輯，被包裹在 TouchMe component 裡
component 是可以重複被使用的，並且是不會互相影響的，
例如，我們可以用 TouchMe component 去建立大量的 TouchMe Button
const App = () => {
return (
<>
<TouchMe />
<TouchMe />
<TouchMe />
<TouchMe />
</>
);
};
如上，每一個 TouchMe Button 都會有自己的邏輯，按下去也不會去影響到其他的
在 React 要如何建立 component 呢？
兩種方式：
以 es6 class 語法 繼承 React.Component
class App extends React.Component {
render() {
return <Text>Hello</Text>;
}
}
必須實作 render function 並且 return react element
就如同範例那樣，宣告一個 function ，最後 return react element
const App = () => {
return <Text>Hello</Text>;
};
它是在 react 裡最小的單位，
它並不是 component ，也不是 component 的 instance，也不是 virtual DOM，
就只是一個純物件(plain object)， 描述關於此節點最終輸出的畫面內容，
那裡面會包含兩個參數， type and props
它的建立有兩種：
React.createElement 來建立
iThome鐵人賽
看影片追技術